<template>
  <div>
    <el-upload
      :action="ossUploadUrl"
      :data="dataObj"
      :accept="accepts"
      :before-upload="beforeUpload"
      :on-progress="uploadVideoProgress"
      :on-success="handleUploadSuccess"
      :on-remove="handleRemove"
      :multiple="false"
      :show-file-list="showFileList"
      :file-list="fileList"
    >
      <el-button size="small" type="primary" v-if="!showFileList">
        点击上传
      </el-button>
      <div slot="tip" class="el-upload__tip" v-if="!showFileList">
        只能上传{{ accepts }}文件，且不超过{{ maxVideoSize }} MB
      </div>
    </el-upload>
    <SelfProgress
      :percentage="videoUploadPercent"
      v-if="showVideoUploadProgress"
    ></SelfProgress>
  </div>
</template>

<script>
import { policy, deleteFile } from "@/api/oss";
import SelfProgress from "@/components/progress/self-progress.vue";
export default {
  components: { SelfProgress },
  props: {
    value: String,
  },
  computed: {
    videoUrl() {
      return this.value;
    },
    videoName() {
      if (this.value != null && this.value !== "") {
        return this.value.substr(this.value.lastIndexOf("/") + 1);
      } else {
        return null;
      }
    },
    fileList() {
      return [
        {
          name: this.videoName,
          url: this.videoUrl,
        },
      ];
    },
    showFileList: {
      get: function () {
        return (
          this.value !== null && this.value !== "" && this.value !== undefined
        );
      },
      set: function (newValue) {},
    },
  },
  data() {
    return {
      ossUploadUrl: "http://atvris.oss-cn-beijing.aliyuncs.com",
      dataObj: {
        policy: "",
        signature: "",
        key: "",
        ossaccessKeyId: "",
        dir: "",
        host: "",
        // callback: '',
      },
      accepts: ".mp4",
      maxVideoSize: 100,
      // 不显示进度条
      showVideoUploadProgress: false,
      // 默认进度条状态->控制样式
      progressStatus: "exception",
      // 进度条百分比
      videoUploadPercent: 0,
    };
  },
  methods: {
    emitInput(val) {
      this.$emit("input", val);
    },
    handleRemove(file, fileList) {
      deleteFile(file.url).then((res) => {
      });
      this.emitInput("");
      this.showVideoUploadProgress = false;
      this.showFileList = false;
    },
    beforeUpload(file) {
      let _self = this;
      const isMP4 = file.type === "video/mp4";
      const isLt100M = file.size / 1024 / 1024 < this.maxVideoSize;

      if (!isLt100M) {
        this.$message.error("上传文件大小不超过" + this.maxVideoSize + "MB");
        return isLt100M;
      }
      if (!isMP4) {
        this.$message.error("上传文件类型必须为mp4文件");
        return isMP4;
      }
      return new Promise((resolve, reject) => {
        policy()
          .then((res) => {
            _self.dataObj.policy = res.data.policy;
            _self.dataObj.signature = res.data.signature;
            _self.dataObj.ossaccessKeyId = res.data.accessKeyId;
            _self.dataObj.key = res.data.dir + "/${filename}";
            _self.dataObj.dir = res.data.dir;
            _self.dataObj.host = res.data.host;
            // _self.dataObj.callback = res.data.callback;
            resolve(true);
          })
          .catch((err) => {
            console.log(err);
            reject(false);
          });
      });
    },
    uploadVideoProgress(event, file, fileList) {
      this.showVideoUploadProgress = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    handleUploadSuccess(res, file) {
      this.videoUploadPercent = 100;
      this.showFileList = true;
      this.fileList.pop();
      let url = this.dataObj.host + "/" + this.dataObj.dir + "/" + file.name;
      this.fileList.push({ name: file.name, url: url });
      this.emitInput(this.fileList[0].url);
    },
  },
};
</script>

<style lang="less" scoped>
</style>